<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>systematicManagement</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for bootstrap inputs, input groups, custom checkboxes and radio controls and more"
            name="description" />
    <meta content="" name="author" />

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../../css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="../../assets/custom/css/iconfont.css" />


    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css" />
    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/modules/laydate/default/laydate.css" />
    <link rel="stylesheet" href="../../assets/custom/css/tabstyle.css" />
    <link rel="stylesheet" href="../../assets/custom/css/change_form.css" />
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css" />
</head>

<body>

<div class="contnet_wrap hFill">

    <div class="left_tree">
        <h3 class="product-nav-title">分类方式</h3>
        <div class="product-nav-list">
            <div class="product-list-select">
                <input type="text" id="plugins4_q" class="form-control input-small input-inline ds_select">
                <i class='fa fa-search search-icon'></i>
            </div>

            <div id="tree_3"></div>
        </div>
    </div>
    <div class=" hFill right_tbale">
        <div class="portlet-body  hFill pon_relative">
            <div class="from_control clearfix">
                <div class="from_control_l">

                    <div class="data_search">
                        <input type="text" class="fa-search-input fl" id="query"/>
                        <button class="btn blue-hoki  fl search_btn" data-type="reload">搜索</button>
                    </div>
                </div>
                <div class="from_control_r">
                    <button class="btn blue-hoki">排序</button>
                    <button class="btn default">刷新</button>
                </div>

            </div>
            <table id="tb"></table>
        </div>
    </div>

</div>


<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script> 
<script src="../../assets/global/plugins/ie8.fix.min.js"></script> 

<!-- BEGIN CORE PLUGINS -->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>


<!--treegird-->
<script src="../../js/plugins/tree-grid/js/jquery.treegrid.js"></script>
<script src="../../js/plugins/tree-grid/js/jquery.treegrid.bootstrap3.js"></script>
<script src="../../js/plugins/tree-grid/js/jquery.treegrid.extension.js"></script>

<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>

<script src="../../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>

<script src="../../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jstree/dist/jquery-ui.js"></script>
<script type="text/javascript" src="../../js/plugins/jsTree/jstree.search.js"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>

<script type="text/javascript" src="../../js/tables/bootstrap-table.js"></script>
<script type="text/javascript" src="../../js/tables/locale/bootstrap-table-zh-CN.js"></script>




<script>
    var results = [{id:"1",text:"分类方式一"},{id:"2",text:"分类方式二"},{id:"3",text:"分类方式三"}];

    //得到tree数组
    function getTree(result) {
        var arr = [];
        var obj = {
            "id": 8899,
            "parent": "#", //最上层父类id为 #
            "state": {"opened": true}, //默认展开所有
            "text": "分类方式",
        };
        arr.push(obj);
        for (var i = 0; i < result.length; i++) {
            var objSub = {
                "id": result[i].id,
                "parent":  8899, //最上层父类id为 #
                "state": {"opened": true}, //默认展开所有
                "text": result[i].text,
            };


            arr.push(objSub);
        }
        return arr;
    }

    //tree初始化
    $("#tree_3").jstree({
        core: {
            themes: {
                responsive: !1,
                "icons" : false,
                "dots" : false
            },
            check_callback: !0,
            'data' : function (obj, cb) {
                cb.call(this,getTree(results));
            }
        },
        types: {
            "default": {
                icon: null
            },
            file: {
                //		icon: "fa fa-file icon-state-warning icon-lg"
            }
        },
        state: {
            key: "demo2"
        },
        plugins: ['wholerow','types',"search","contextmenu"],
        //-------------------------------------------------------------------------
        "contextmenu": {
            "items": function (node) {
                if(node.parent === "#"){return}

                var item = {
                    "rename":{
                        "separator_before"  : false,
                        "separator_after"   : false,
                        "_disabled"         : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                        "label"             : "重命名",
                        "shortcut_label"    : 'F2',
                        "icon"              : "icon-note",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            inst.edit(obj);
                            console.log(obj)
                        }
                    },
                    "deletes":{
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "_disabled"         : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                        "label"             : "删除",
                        "icon"              :"glyphicon glyphicon-trash",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            if(inst.is_selected(obj)) {
                                inst.delete_node(inst.get_selected());
                            }
                            else {
                                inst.delete_node(obj);
                            }
                        },
                    }
                };

                return item;
            }
        }

    });

    var to = false;
    $('#plugins4_q').keyup(function () {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function () {
            var v = $('#plugins4_q').val();
            $('#tree_3').jstree(true).search(v);
        }, 250);
    });

    //treegrid初始化
    $('#tb').treegridData({
        id : 'nodeId',
        parentColumn : 'parentId',
        type : "GET", //请求数据的ajax类型
        url : 'treegrid.json', //请求数据的ajax的url
        //ajaxParams : param, //请求数据的ajax的data属性
        expandColumn : 'nodeName',//在哪一列上面显示展开按钮
        striped : false, //是否各行渐变色
        bordered : true, //是否显示边框
        expandAll : true, //是否全部展开
        hoverRowBackground : true,
        columns : [ {
            title : '节点名称',
            field : 'nodeName'
        }, {
            title : 'IP地址',
            field : 'ip'
        }, {
            title : '通讯端口',
            field : 'port'
        }, {
            title : '所属机构',
            field : 'orgName'
        }, {
            title : '可用状态',
            field : 'available'
        }, {
            title : '操作',
            field : "<a class='table_icon' title='修改'> <i class='iconfont icon-icon_edit'></i></a>"
        } ]
    });

</script>
</body>

</html>